<template>
   <div>
     <h3>会员添加页面</h3>
     <table class="table table-borderd">
       <tbody>
         <tr>
           <td >帐号</td>
           <td><input type="text" v-model="queryInfo.Name" /></td>
         </tr>
         <tr>
           <td >密码</td>
           <td><input type="password" v-model="queryInfo.Pwd" /></td>
         </tr>
         <tr>
           <td >确认密码</td>
           <td><input type="password" v-model="PwdOk" /></td>
         </tr>
         <tr>
           <td>手机号</td>
           <td>
             <input type="text" v-model="queryInfo.Phone" maxlength="11" />
           </td>
         </tr>
         <tr>
           <td >身份证</td>
           <td><input type="text" v-model="queryInfo.Card" maxlength="18" /></td>
         </tr>
         <tr>
           <td >生日</td>
           <td><input type="date" v-model="queryInfo.Birthday" /></td>
         </tr>
         <tr>
           <td >性别</td>
           <td>
             <input
               type="radio"
               name="sex"
               v-model="queryInfo.Sex"
               :value="1"
             />男<input
               type="radio"
               name="sex"
               v-model="queryInfo.Sex"
               :value="0"
             />女
           </td>
         </tr>
         <tr>
           <td >积分</td>
           <td><input type="text" v-model="queryInfo.Points" /></td>
         </tr>
         <tr>
           <td >余额</td>
           <td><input type="text" v-model="queryInfo.Money" /></td>
         </tr>
         <tr>
           <td >会员等级</td>
           <td>
             <select v-model="queryInfo.LevelId">
               <option value="">请选择</option>
               <option
                 :value="item.Id"
                 v-for="item in memberLevelList"
                 :key="item.Id"
               >
                 {{ item.LevelName }}
               </option>
             </select>
           </td>
         </tr>
         <tr>
           <td ></td>
           <td><input type="button" value="添加" class="btn btn-success" @click="ok" /></td>
         </tr>
       </tbody>
     </table>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue';
 import axios from 'axios';
 import { useRouter } from 'vue-router';
 //路由器对象 作用：实现页面跳转并且传参
 const router = useRouter();
 
 //数据--------------------------
 //向后端传递的数据
 let queryInfo = reactive({
   Name: '',
   Phone: '',
   Card: '',
   Birthday: '',
   Sex: 1,
   Pwd: '',
   Money: '',
   Points: '',
   LevelId: '',
 });
 //确认密码
 let PwdOk = ref('');
 
 //接受后端返回的会员等级列表数据
 let memberLevelList: any = ref([]);
 
 //函数---------------------------
 //页面一加载就需要获取会员等级列表
 onMounted(() => {
   getMemnerList();
 });
 //获取会员等级列表
 const getMemnerList = () => {
   axios({
     url: '/api/Members/MemberLevelsList',
     method: 'get',
   })
     .then((res) => {
       console.log(res);
       //需要存储
       memberLevelList.value = res.data;
     })
     .catch((err) => {
       console.log(err);
     });
 };
 
 //增加会员
 const ok = () => {
   //1.非空+有效验证
   if (queryInfo.Name == '') {
     alert('帐号不能为空');
     return;
   }
   if (queryInfo.Pwd == '') {
     alert('密码不能为空');
     return;
   }
   if (PwdOk.value == '') {
     alert('确认密码不能为空');
     return;
   }
 
   if (queryInfo.Pwd != PwdOk.value) {
     alert('密码和确认密码不一致');
     return;
   }
   if (queryInfo.Phone == '') {
     alert('手机号不能为空');
     return;
   }
   //是否是正确的手机号
   let reg = /^1[3-9]\d{9}$/;
   if (reg.test(queryInfo.Phone) == false) {
     alert('手机号不合法');
     return;
   }
   if (queryInfo.Card == '') {
     alert('身份证号码不能为空');
     return;
   }
 
   let reg1 = /^\d{17}[0-9Xx]$/;
   if (reg1.test(queryInfo.Card) == false) {
     alert('身份证不合法');
     return;
   }
 
   if (queryInfo.Birthday == '') {
     alert('生日不能为空');
     return;
   }
 
   if (queryInfo.Points == '') {
     alert('积分不能为空');
     return;
   }
   //isNaN判断一个字符串是不是数字 ，如果是数字返回是值false   如果不是true
   //Number是数据类型转换 将字符串转成数值类型
   if (isNaN(Number(queryInfo.Points)) == true) {
     alert('积分只能数字');
     return;
   }
 
   if (queryInfo.Money == '') {
     alert('余额不能为空');
     return;
   }
 
   if (isNaN(Number(queryInfo.Money)) == true) {
     alert('余额只能是数字');
     return;
   }
 
   if (queryInfo.LevelId == '') {
     alert('会员等级必选');
     return;
   }
 
   //2.发送网络请求将数据填加到数据库
 
   axios({
     url: '/api/Members/MemberAdd',
     method: 'post',
     data: queryInfo,
   })
     .then((res) => {
       //发送网络请求成功时调用的函数 相当于success
       console.log(res);
       if (res.data == -1) {
         alert('手机号重复');
         return;
       }
       if (res.data == -2) {
         alert('身份证重复');
         return;
       }
       alert('添加成功');
       //成功跳转到显示列表页
       router.push('/MemberList');//跳转
     })
     .catch((err) => {
       //发送网络请求失败时调用的函数 相当于error
       console.log(err);
     });
 };
 </script>
 
 <style scoped></style>
 